小程序日历
日历
源码见https://github.com/treadpit/wx_calendar
<p class="tip">日历模板面板支持手势左右滑动</p>
提供 template
模板引入
1. 引入wxml
及wxss
// example.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
<template is="calendar" data="{{...calendar}}" />
</view>
/* example.wxss */
@import '../../template/calendar/index.wxss';
2. 日历组件初始化
import initCalendar from '../../template/calendar/index';
const conf = {
onShow: function() {
initCalendar(); // 使用默认配置初始化日历
}
};
Page(conf);
3. 日历组件配置
initCalendar()
可传入自定义配置
import initCalendar from '../../template/calendar/index';
const conf = {
multi: true, // 是否开启多选,
disablePastDay: true, // 是否禁选过去的日期
/**
* 初始化日历时指定默认选中日期,如:'2018-3-6' 或 '2018-03-06'
* 注意:若想初始化时不默认选中当天,则将该值配置为除 undefined 以外的其他非值即可,如:空字符串, 0 ,false等。
*/
defaultDay: '2018-3-6',
/**
* 选择日期后执行的事件
* @param { object } currentSelect 当前点击的日期
* @param { array } allSelectedDays 选择的所有日期(当mulit为true时,才有allSelectedDays参数)
*/
afterTapDay: (currentSelect, allSelectedDays) => {},
/**
* 日期点击事件(此事件会完全接管点击事件)
* @param { object } currentSelect 当前点击的日期
* @param { object } event 日期点击事件对象
*/
onTapDay(currentSelect, event) {},
/**
* 日历初次渲染完成后触发事件,如设置事件标记
*/
afterCalendarRender() {},
}
initCalendar(conf);
4. 跳转至指定日期
import { jump } from '../../template/calendar/index';
// 不传入参数则默认跳转至今天
jump();
// 入参必须为数字
jump(2018, 6); // 跳转至2018-6
jump(2018, 6, 6); // 跳转至2018-6-6
5. 待办事项
5.1 设置待办标记
import { setTodoLabels } from '../../template/calendar/index';
setTodoLabels({
pos: 'bottom',
dotColor: '#40',
days: [{
year: 2018,
month: 5,
day: 12,
}, {
year: 2018,
month: 5,
day: 15,
}],
});
5.2 删除代办标记
import { deleteTodoLabels } from '../../template/calendar/index';
deleteTodoLabels([{
year: 2018,
month: 5,
day: 12,
}, {
year: 2018,
month: 5,
day: 15,
}]);
5.3 清空代办标记
import { clearTodoLabels } from '../../template/calendar/index';
clearTodoLabels();
6. 禁选指定日期
import { disableDay } from '../../template/calendar/index';
disableDay([{
year: 2018,
month: 7,
day: 31,
}]);
7. 指定可选日期范围
import { enableDay } from '../../template/calendar/index';
enableArea(['2018-8-12', '2018-08-30']);
8. 周月视图切换
switchView('week')
,默认值为'month';
import { switchView } from '../../template/calendar/index';
// 切换为周视图
switchView('week');
// 切换为月视图
switchView();
// 或者
switchView('month');
日期选择器
日期选择 input 组件支持直接输入指定日期日历模板面板支持手势左右滑动
<p class="tip">此 template
带有 input
输入框,不影响模板的使用,可配置隐藏</p>
1. 引入wxml
及wxss
// example.wxml
<import src="../../template/datepicker/index.wxml"/>
<view class="datepicker-box">
<template is="datepicker" data="{{...datepicker}}" />
</view>
/* example.wxss */
@import '../../template/datepicker/index.wxss';
2. 日期选择器初始化
import initDatepicker from '../../template/datepicker/index';
const conf = {
onShow: function() {
initDatepicker(); // 使用默认配置初始化日历选择器
},
};
Page(conf);
3. 日期选择器配置
import initDatepicker from '../../template/datepicker/index';
const conf = {
disablePastDay: true, // 是否禁选过去日期
showInput: false, // 默认为 true
placeholder: '请选择日期', // input 输入框
type: 'normal', // [normal 普通单选模式(默认), timearea 时间区域选择模式(待开发), multiSelect 多选模式(待完善)]
/**
* 选择日期后执行的事件
* @param { object } currentSelect 当前点击的日期
*/
afterTapDay: (currentSelect) => {},
/**
* 日期点击事件(此事件会完全接管点击事件)
* @param { object } currentSelect 当前点击的日期
* @param {object} event 日期点击事件对象
*/
onTapDay(currentSelect, event) {},
}
initDatepicker(conf);
4. 跳转至今天
import { getSelectedDay, jumpToToday } from '../../template/datepicker/index';
jumpToToday();
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。